<template>
  <div>
    <h2>进制转换</h2>
    <el-row class="binary-config-row">
      <el-col :span="6" :offset="1">
        <el-button :type="isFormatNumber ? 'success' : 'danger'" @click="isFormatNumber = !isFormatNumber">
          {{ isFormatNumber ? '格式化数字' : '不格式化数字' }}
        </el-button>
      </el-col>
      <el-col :span="11" class="binary-col-right">
        <el-switch v-model="isFormatNumber" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
      </el-col>
    </el-row>

    <el-form label-width="80px">
      <el-row class="" :gutter="20">
        <el-col :span="12">
          <el-form-item label="二进制" :rules="[{ type: 'number', message: '请输入数字' }]">
            <el-input v-model.number="binValue" />
          </el-form-item>
        </el-col>
        <el-col :span="12"> </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="八进制">
            <el-input v-model="octValue" />
          </el-form-item>
        </el-col>
        <el-col :span="12"> </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="十进制">
            <el-input v-model="decValue" />
          </el-form-item>
        </el-col>
        <el-col :span="12"> </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="十六进制">
            <el-input v-model="hexValue" />
          </el-form-item>
        </el-col>
        <el-col :span="12"> </el-col>
      </el-row>
    </el-form>

    <!-- <el-form label-width="80px">
      <el-form-item label="二进制" prop="age" :rules="[{ type: 'number', message: '请输入数字' }]">
        <el-input v-model.number="binValue" type="text" autocomplete="off" />
        <el-button type="success" :icon="Checked" circle />
        <el-button type="warning" :icon="DocumentCopy" circle />
      </el-form-item>
      <el-form-item> </el-form-item>
    </el-form> -->
  </div>
</template>

<script setup lang="ts">
// import { watch } from 'fs';
import { ref, watch } from 'vue';

const isFormatNumber = ref(false);
// 二进制
const binValue = ref('');
// 八进制
const octValue = ref(0);
// 十进制
const decValue = ref(0);
// 十六进制
const hexValue = ref(0);

watch(binValue, (newBinValue, oldBinValue) => {
  console.log(oldBinValue);
  if (/^[01]+$/.test(newBinValue)) {
    console.log('valid input');
  } else {
    console.log('invalid input');
  }
  // if (newBinValue !== null && newBinValue !== undefined && newBinValue.toString().indexOf(' ') === -1 && /[01]/.test(newBinValue)) {
  //   console.log('valid input');
  // } else {
  //   console.log('invalid input');
  // }
});
</script>

<style scoped>
.binary-config-row {
  height: 80px;
  border: 1px solid #e4e7ed;
  border-radius: 5px;
  align-items: center;
}

.binary-col-right {
  display: flex;
  justify-content: flex-end;
}
</style>
